<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:include="common/admin/adminHeader::html('产品图片管理')">
</head>

<body>
<!-- 导航栏 -->
<div th:replace="common/admin/adminNavigator::html"></div>


<script>

    $(function(){
        var pid = getUrlParms("pid");
        var singleType = 'single';
        var detailType = 'detail';
        var data4Vue = {
            uri:"productimage",
            singlebeans:[],
            detailbeans:[],
            productimage:{     //用于存放产品图片信息的信息
                id:0,
                pid: 0,
                type:""
            },
            singleFile:null,
            detailFile:null,
            product:{     //用于存放图片对应的产品的信息
                id:pid,
                cid:0,
                name:""
            }

        };

        //ViewModel
        var vue = new Vue({
            el: '#container-fluid',
            data: data4Vue,
            mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                this.list();
            },
            methods: {
                list:function(){
                    //productimage/listAll?pid=958&type=single
                    var urlsingle =  this.uri + "/listAll?pid=" + pid + "&type=" + singleType;
                    axios.get(urlsingle).then(function(response) {
                        vue.singlebeans = response.data.data;
                    });
                    //productimage/listAll?pid=958&type=detail
                    var urldetail =  this.uri + "/listAll?pid=" + pid + "&type=" + detailType;
                    axios.get(urldetail).then(function(response) {
                        vue.detailbeans = response.data.data;
                    });

                    var url_product = "product/" + pid;
                    axios.get(url_product).then(function(response) {
                        vue.product = response.data.data;
                    });
                },
                getSingleImage:function (event) {
                    this.singleFile=event.target.files[0];
                },
                getDetailImage:function (event) {
                    this.detailFile=event.target.files[0];

                },
                addSingle:function () {

                    if(!checkEmpty(vue.singleFile, "单个产品图片"))
                        return;

                    vue.productimage.type = singleType;
                    vue.productimage.pid = pid;
                    var url = this.uri + "/create";
                    var formData = new FormData();
                    formData.append("pid", vue.productimage.pid);
                    formData.append("type", vue.productimage.type);
                    formData.append("image", vue.singleFile);

                    axios.post(url,formData).then(function(response){
                        vue.list();

                        $("#singlePic").val('');
                        vue.productimage = { id: 0, pid: 0, type: ''};
                    });
                },
                addDetail: function () {

                    if(!checkEmpty(vue.detailFile, "详情产品图片"))
                        return;

                    vue.productimage.type = detailType;
                    vue.productimage.pid = pid;
                    var url = this.uri + "/create";
                    var formData = new FormData();
                    formData.append("pid", vue.productimage.pid);
                    formData.append("type", vue.productimage.type);
                    formData.append("image", vue.detailFile);

                    axios.post(url,formData).then(function(response){
                        vue.list();

                        $("#detailPic").val('');
                        vue.file = null;
                        vue.productimage = { id: 0, pid: 0, type: ''};
                    });
                },
                deleteSingleImage:function (id) {
                    if (!checkDeleteLink){
                        return;
                    }
                    var url = this.uri + "/" + id + "?type=" + singleType;
                    axios.delete(url).then(function (value) {
                        if(0!=value.data.length){
                            alert("是否删除"+ id + "产品");
                            //删除成功后，查询最后一页
                            vue.list(999);
                        }
                        else{
                            vue.list(0);
                        }
                    });
                },
                deleteDetailImage:function (id) {
                    if (!checkDeleteLink()){
                        return;
                    }
                    var url = this.uri + "/" + id + "?type=" + detailType;
                    axios.delete(url).then(function (value) {
                        if(0!=value.data.length){
                            alert("成功删除"+ id + "产品");
                            //删除成功后，查询最后一页
                            vue.list(999);
                        }
                        else{
                            vue.list(0);
                        }
                    });
                }

            }
        });
    });

</script>

<!-- 页面可变内容 -->
<div class="container-fluid" id="container-fluid">

    <ol class="breadcrumb">
        <li><a href="listCategory">所有分类</a></li>
        <li><a :href="'listProduct?cid=' + product.cid">{{product.name}}</a></li>
        <li class="active">管理产品图片</li>
    </ol>

    <!-- 图片表格信息信息-->
    <table class="addPictureTable" align="center">
        <tr>
            <!-- type=single 类型图片 -->
            <td class="addPictureTableTD">
                <div>
                    <!--新增框-->
                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary"> 单个 </b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>请选择本地图片 尺寸400X400 为佳</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="singlePic" type="file" accept="image/*" @change="getSingleImage($event)" name="image" />
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addSingle" class="btn btn-success">提 交</button>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <!--产品图片信息-->
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品单个图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="list in singlebeans">
                            <td>{{list.id}}</td>
                            <td>
                                <a title="点击查看原图" :href="'img/productSingle/'+list.id+'.jpg'">
                                    <img height="50px" :src="'img/productSingle/'+list.id+'.jpg'">
                                </a>
                            </td>
                            <td>
                                <a href="#nowhere" @click="deleteSingleImage(list.id)"> <span class="glyphicon glyphicon-trash"></span></a>
                            </td>

                        </tr>
                        </tbody>
                    </table>

                </div>
            </td>
            <!-- type=detail 类型图片 -->
            <td class="addPictureTableTD">
                <div>

                    <div class="panel panel-warning addPictureDiv">
                        <div class="panel-heading">新增产品<b class="text-primary"> 详情 </b>图片</div>
                        <div class="panel-body">
                            <table class="addTable">
                                <tr>
                                    <td>请选择本地图片 宽度790  为佳</td>
                                </tr>
                                <tr>
                                    <td>
                                        <input id="detailPic" type="file" accept="image/*" @change="getDetailImage($event)" name="image" />
                                    </td>
                                </tr>
                                <tr class="submitTR">
                                    <td align="center">
                                        <button type="submit" @click="addDetail" class="btn btn-success">提 交</button>
                                    </td>
                                </tr>
                            </table>

                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover  table-condensed">
                        <thead>
                        <tr class="success">
                            <th>ID</th>
                            <th>产品详情图片缩略图</th>
                            <th>删除</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="list in detailbeans">
                            <td>{{list.id}}</td>
                            <td>
                                <a title="点击查看原图" :href="'img/productDetail/'+list.id+'.jpg'">
                                    <img height="50px" :src="'img/productDetail/'+list.id+'.jpg'">
                                </a>
                            </td>
                            <td>
                                <a href="#nowhere" @click="deleteDetailImage(list.id)"><span class="glyphicon glyphicon-trash"></span></a>
                            </td>

                        </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </table>

</div>

</body>

</html>